<style lang="less" scoped>
.demo-auto-complete-item {
  padding: 4px 0;
  border-bottom: 1px solid #f6f6f6;
}
.demo-auto-complete-group {
  font-size: 12px;
  padding: 4px 8px;
}
.demo-auto-complete-group span {
  color: #666;
  font-weight: bold;
}
.demo-auto-complete-group a {
  float: right;
}
.demo-auto-complete-count {
  float: right;
  color: #999;
}
.demo-auto-complete-more {
  display: block;
  margin: 0 auto;
  padding: 4px;
  text-align: center;
  font-size: 12px;
}
.search-panel {
  position: absolute;
  top: 14px;
  transform: translateX(-100%);
  transition: max-width 0.5s, opacity 0.3s linear 0.2s;
}
</style>

<style>
.ivu-auto-complete input {
  border: none;
}
.ivu-auto-complete input:focus,
.ivu-auto-complete input:active {
  box-shadow: none;
}
</style>


<template>
<div>
    <div class="search-panel" :style="{opacity: searchMode? 1: 0, maxWidth: searchMode?'200px':0, overflow: searchMode? 'visible':'hidden'}">
        <AutoComplete
        @on-search="startSearch"
        @on-select="selectItem"
        v-model="searchedWord"
        placeholder="搜索"
        style="width:200px; ">
            <div class="demo-auto-complete-item" v-for="item in searchOptions">
                <div class="demo-auto-complete-group">
                    <span>{{ item.title }}</span>
                </div>
                <Option v-for="option in item.children" :value="`/${item.type}-detail/${option.title}`" :key="option.title">
                    <span class="demo-auto-complete-title">{{ option.title }}</span>
                </Option>
            </div>
            <a href="https://www.google.com/search?q=iView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
        </AutoComplete>
        <Icon type="ios-close" style="position: absolute; top: 10px; right: 24px; cursor: pointer" color="#aaa" @click.native="clearSearch"></Icon>
        <div style="width: 180px; height: 1px; background: #aaa; position: relative; transform: translateY(-2px)"></div>
    </div>
    <div @click="openSearch" class="full-screen-btn-con">
        <Tooltip content="搜索" placement="bottom">
            <Icon type="android-search" :size="23"></Icon>
        </Tooltip>
    </div>
</div>
</template>

<script>
export default {
  name: "fullScreen",
  data() {
    return {
      searchMode: false,
      searchedWord: "",
      searchOptions: []
    };
  },
  methods: {
    clearSearch(){
      this.searchedWord = '';
    },
    openSearch() {
      this.searchMode = !this.searchMode;
    },
    selectItem(value) {
      this.$router.push({ path: value });
      this.searchedWord = '';
      this.searchMode = false;
    },
    startSearch(query) {
      if (query.length < 4) {
        this.searchOptions = [];
        return;
      }
      this.searchOptions = [
        {
          title: "AC",
          type: "AC",
          children: [
            {
              title: "SLR01-WiFi-08b"
            },
            {
              title: "SLR01-WiFi-08a"
            }
          ]
        },
        {
          title: "AP",
          type: "AP",
          children: [
            {
              title: "70:3a:0e:cb:6b:9c"
            },
            {
              title: "73:44:1c:99:04:a3"
            }
          ]
        },
        {
          title: "终端",
          type: "client",
          children: [
            {
              title: "1045127452"
            }
          ]
        }
      ];
    }
  }
};
</script>

